<template>
  <div id="list">

    <p class="list-title">城市路况排名</p>
    <p class="table-title">
      <span class="sort">排名</span>
      <span :class="[cur_index_type=='01'?'':'no-stat','city']">城市</span>
      <span class="param">拥堵指标</span>
      <span class="stat" v-if="cur_index_type=='01'">标准差</span>
    </p>
    <NoData v-if="indexList.length === 0"/>
    <EasyScrollbar :barOption="listBar">
      <ul :style="{ height: listHeight + 'px' }">
        <li v-for="item in indexList" :class="[cur_city.cityname == item.cityname?'active':'']"
            @click="setCurCity(item)">
          <span :class="[cur_index_type=='01'?'':'has-stat','sort']">{{item.ranking}}</span>
          <span :class="[cur_index_type=='01'?'city_1':'',indexClass(item),'city']">{{item.cityname.substr(0,item.cityname.length-1)}}</span>
          <span :class="[indexClass(item),'param']" :title="formatPercent(item.index,2)">{{cur_index_type=='01'?formatPercent(item.index,2):formatPercent(item.index,1)}}</span>
          <span class="stat"
                v-if="cur_index_type=='01'">{{item.standard || item.standard === 0 ? item.standard.toFixed(1) : "-"}}</span>
        </li>
      </ul>
    </EasyScrollbar>
  </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import MYCONFIG from '../../myconf'
  import DateTimeHelper from '../../util/datetime-helper';
  import ColorHelper from '../../util/colpor-helper';
  import eventBus from '../../util/event-bus';
  import IndexController from '../../control/indexCtroller'
  import NoData from './NoData'
  export default {
    name: 'IndexList',
    data () {
      return {
        curTime: '',  //当前5分钟时间戳
        indexList: [],  //当前排名列表
        globalList: [],  //全国排名geo列表
        listBar: {
          barColor: "#344757",   //滚动条颜色
          barWidth: 2,           //滚动条宽度
          railColor: "#405569",     //导轨颜色
          barMarginRight: 0,     //垂直滚动条距离整个容器右侧距离单位（px）
          barMaginBottom: 0,     //水平滚动条距离底部距离单位（px)
          barOpacityMin: 0.2,      //滚动条非激活状态下的透明度
          zIndex: "auto",        //滚动条z-Index
          autohidemode: true,     //自动隐藏模式
          horizrailenabled: false,//是否显示水平滚动条
        },
        cur_city_info: {},
        listHeight: document.body.clientHeight - 153 - 2,
        screenHeight:document.body.clientHeight,
        screenWidth:document.body.clientWidth,
      }
    },
    mounted(){
      this.controller = new IndexController(this);
      this.$nextTick(() => {
        this.listHeight = document.body.clientHeight - 153 - 2;
      });
      window.onresize = () => {
        let that = this;
        return (() => {
          window.screenHeight = document.body.clientHeight;
          that.screenHeight = window.screenHeight;
          window.screenWidth = document.body.clientWidth;
          that.screenWidth = window.screenWidth;
        })();
      };
      eventBus.$on('curIndexType_changed', () => {
        this.controller.getIndexList();
      });
      this.$nextTick(() => {
        this.controller.getIndexList();
      });
      eventBus.$on('setGlobalInterval', () => {
        this.controller.getIndexList();
      });
    },
    components: {
      NoData,
    },
    computed: {
      ...mapGetters(['cur_city', 'cur_index_type', 'index_max', 'cur_timestamp', 'cur_state', 'date_type', 'history_type', 'history_time', 'history_hour']),
//      listHeight: () => {
//        return document.body.clientHeight - 153 - 5
//      }
    },
    methods: {
      ...mapMutations(['updateCurCity', 'updateIndexMax','updateServerTimestamp']),
      indexClass(item){
        return this.controller.setIndexColor(item);
      },
      setCurCity(city){
        this.updateCurCity(city);
      },
      formatPercent(index,item){
        return this.cur_index_type === '01' && index ? index.toFixed(item) : index.toFixed(item) + '%';
      }
    },
    watch: {
//      cur_index_type(curVal, oldVal){
//        if (curVal != oldVal) {
//          this.globalList = [];
//          this.indexList = this.controller.getIndexList();
//        }
//      },
      indexList(curVal, oldVal){
        if (curVal != oldVal) {
          this.globalList = [];
          let tempList = [];
          if (this.indexList && this.indexList.length > 0) {
            this.indexList.map((city) => {
              let geoList = {
                "type": "Feature",
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    city.centerX,
                    city.centerY
                  ]
                },
                "properties": {
                  "index": parseFloat(city.index),
                  "name": city.cityname,
                  "code": city.code,
                }
              };
              this.globalList.push(geoList);
              tempList.push(city.index);
            });
            let max = Math.max(...tempList);
            let indexRange = MYCONFIG.DELAY_RANGE;
            switch (this.cur_index_type) {
              case '01':
                indexRange = MYCONFIG.DELAY_RANGE;
                break;
              case '02':
                indexRange = MYCONFIG.JAM_RANGE;
                break;
              case '03':
                indexRange = MYCONFIG.SPACE_RANGE;
                break;
              default:
                indexRange = MYCONFIG.DELAY_RANGE;
                break;
            }
            let indexMax = parseFloat(max) <= indexRange[1] ? indexRange[1] : max;
            this.updateIndexMax(indexMax);
            eventBus.$emit('updateGlobalIndex', this.globalList, curVal);
          }
        }
      },
      screenHeight(val){
        if (!this.timer) {
          this.screenHeight = val;
          this.timer = true;
          let that = this;
          setTimeout(function () {
            that.listHeight = document.body.clientHeight - 153 - 2;
            eventBus.$emit("screenHChanged",val);
            that.timer = false;
          }, 400)
        }
      },
      screenWidth(val){
        if (!this.timer2) {
          this.screenWidth = val;
          this.timer2 = true;
          let that = this;
          setTimeout(function () {
            eventBus.$emit("screenWChanged",val);
            that.timer2 = false
          }, 300)
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../common/common.scss";

  #list {
    height: calc(100% - 38px);
    .list-title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      text-align: center;
      @include backdropBlur;
      background-color: rgba(0, 0, 0, 0.22);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05);
    }
    .table-title {
      width: 100%;
      display: flex;
      span {
        @include listStyle;
        opacity: 0.5;
        flex-grow: 1;
        &.city {
          flex-grow: 3;
          &.no-stat {
            flex-grow: 1;
          }
        }
      }
    }
    ul {
      height: calc(100% - 48px);
      width: 100%;
      li {
        display: flex;
        cursor: pointer;
        opacity: 0.6;
        &.active {
          @include backdropBlur;
          background-color: $bg-panel;
          opacity: 1;
          font-weight: bold;
        }
        span {
          @include listStyle;
          font-size: 15px;
          &.sort {
            width: 28px;
            &.has-stat {
              width: 42px;
            }
          }
          &.city {
            width: 86px;
            &.city_1 {
              width: 78px;
            }
          }
          &.param {
            /*width: 15px;  */
            flex-grow: 1;
            text-align: left;
            font-size: 16px;
          }
          &.stat {
            font-size: 12px;
            flex-grow: 1;
            text-align: left;
          }
          &.redIndex {
            color: $font-red;
          }
          &.lineIndex {
            color: $font-line;
          }
          &.yellowIndex {
            color: $font-yellow;
          }
          &.greenIndex {
            color: $font-green;
          }
          &.baseIndex {
            color: $font-base;
          }
        }
      }
    }

  }
</style>
